<template>
  <div class="login-body">
    <div class="left-wrap">
      <img :src="logoPath" class="title-img_top" />
      <img src="@/assets/image/p1.jpg" class="desc-img_bottom">
    </div>
    <loginForm v-if="currentForm === 'login'" @formToggle="toggleForm"/>
    <registerForm v-else-if="currentForm === 'register'" @formToggle="toggleForm"/>
    <refindPwdForm v-else-if="currentForm === 'refindPwd'" @formToggle="toggleForm"/>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import loginForm from './components/loginForm.vue'
import registerForm from './components/registerForm.vue'
import refindPwdForm from './components/refindPwd.vue'
import config from "~/config";


const logoPath = config[import.meta.env.MODE].logo

/**
 * 当前展示的表单
 * 取值 'login' |'register' |'refindPwd'
 */
const currentForm = ref('login');


/**
 * 切换表单
 * @param {'login' |'register' |'refindPwd'} formType 表单類型
 */
const toggleForm = (formType) => {
  currentForm.value = formType;
}

</script>

<style scoped lang="scss">
.login-body {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 90px;

  .left-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    .title-img_top {
      width: 557px;
      height: 145px;
      position: relative;
      z-index: 1;
    }

    .desc-img_bottom {
      width: 1060px;
      height: 768px;
      margin-top: -70px;
    }
  }

}
</style>
